<template>
  <div id="app">
    <el-input v-model="userId" placeholder="请输入用户ID" style="width:300px"></el-input>
    <el-input v-model="orderSn" placeholder="请输入订单编号" style="width:300px"></el-input>
      <el-select v-model="orderStatus" placeholder="请选择类型">
				<el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value">
				</el-option>
			</el-select>&nbsp;&nbsp;&nbsp;&nbsp;
    <el-button @click="getKeyList" type="primary" size="small">查询</el-button>&nbsp;&nbsp;
    <el-table
      :data="tableData"
      border
      style="width: 100%"
      :default-sort="{prop: 'date', order: 'descending'}"
    >
      <el-table-column fixed prop="order_sn" label="订单编号" width="160"></el-table-column>
      <el-table-column prop="user_id" label="用户ID" width="120"></el-table-column>
      <el-table-column prop="order_status" label="订单状态" :formatter="formatter2" width="200"></el-table-column>
      <el-table-column prop="pay_time" :formatter="dateFormat" label="支付时间" width="150"></el-table-column>
      <el-table-column prop="ship_sn" label="物流单号" width="120"></el-table-column>
      <el-table-column prop="ship_channel" label="物流渠道" width="120"></el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button @click="selectList(scope.row)" type="primary" size="small">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[1, 3, 6, 10]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>

    <!-- 详情对话框 -->
    <el-dialog title="编辑" :visible.sync="updFlag">
      <el-form :model="form">
        <el-input v-model="form.id" type="hidden" autocomplete="off"></el-input>
        <el-form-item label="订单编号">&nbsp;&nbsp;#{{form.order_sn}}</el-form-item>
        <el-form-item label="订单状态">&nbsp;&nbsp;#{{form.order_status}}</el-form-item>
        <el-form-item label="订单用户">&nbsp;&nbsp;#{{form.user_id}}</el-form-item>
        <el-form-item label="用户留言">&nbsp;&nbsp;#{{form.message}}</el-form-item>
        <el-form-item label="收货地址">&nbsp;&nbsp;#{{form.address}}</el-form-item>

      <el-form-item label="商品信息">
     <el-table
      :data="tableData"
      border
      style="width: 100%"
    >
      <el-table-column fixed prop="goods_name" label="商品名称" width="100"></el-table-column>
      <el-table-column prop="goods_sn" label="商品编号" width="100"></el-table-column>
      <el-table-column prop="specifications" label="商品规格"  width="100"></el-table-column>
      <el-table-column prop="number"  label="购买数量" width="100"></el-table-column>
      <el-table-column prop="price" label="商品单价" width="120"></el-table-column>
       <el-table-column label="货品图片" width="120">
          <template slot-scope="scope">
          <img :src="scope.row.pic_url" min-width="70" height="70" />
        </template>
      </el-table-column>
    </el-table>
      </el-form-item>
        <el-form-item label="费用信息">
          <br />
          &nbsp;&nbsp;1.实际费用:#{{form.order_price}}
        </el-form-item>
        <el-form-item label="支付信息">
          <br />
          &nbsp;&nbsp;1.支付宝支付码:{{form.pay_id}}
        </el-form-item>
        <el-form-item label="快递信息:">
          <br />
          &nbsp;&nbsp;1.快递单号:#{{form.ship_sn}}<br>
          &nbsp;&nbsp;2.快递公司:#{{form.ship_channel}}<br>
          &nbsp;&nbsp;3.发货时间:#{{form.ship_time}}
        </el-form-item>
        <el-form-item label="退款信息">
          <br />
          &nbsp;&nbsp;1.退款金额:#{{form.refund_amount}}<br>
          &nbsp;&nbsp;2.退款类型:#{{form.refund_type}}<br>
          &nbsp;&nbsp;3.退款备注:#{{form.refund_content}}<br>
          &nbsp;&nbsp;4.退款时间:#{{form.refund_time}}
        </el-form-item>
        <el-form-item label="收货信息">
          <br />
          &nbsp;&nbsp;1.收货时间:#{{form.confirm_time}}
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="updFlag = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  methods: {
    dateFormat: function(row, column) {
      var date = row[column.property];
      if (date == undefined) {
        return "";
      }
      var moment = require("moment");
      return moment(date).format("YYYY-MM-DD HH:mm:ss");
    },
    getParentList() {
      var $this = this;
      this.axios({
        method: "get",
        url: "http://localhost:9999/market/ecOrder/xujiabao/selects"
      }).then(function(res) {
        this.formInline = res.data.obj;
        order_status: this.order_status;
      });
    },
    selectList(row) {
      var $this = this;
      this.updFlag = true;
      this.form.id = row.id;
      this.form.ship_channel = row.ship_channel;
      this.form.refund_content = row.refund_content;
      this.form.goods_name = row.goods_name;
      this.form.address = row.address;
      this.form.refund_type = row.refund_type;
      this.form.order_price = row.order_price - row.integral_price;
      this.form.ship_time = row.ship_time;
      this.form.goods_id = row.goods_id;
      this.form.goods_sn = row.goods_sn;
      this.form.specifications = row.specifications;
      this.form.order_status = row.order_status;
      this.form.number = row.number;
      this.form.user_id = row.user_id;
      this.form.id = row.id;
      this.form.refund_time = row.refund_time;
      this.form.price = row.price;
      this.form.refund_amount =
        row.goods_price + row.freight_price - row.coupon_price;
      this.form.pay_id = row.pay_id;
      this.form.pic_url = row.pic_url;
      this.form.order_sn = row.order_sn;
      this.form.ship_sn = row.ship_sn;
      this.form.confirm_time = row.confirm_time;
      this.form.message = row.message;
    },
    formatter2(row) {
      if (row.order_status != null) {
        if (row.order_status == 0) {
          return "未付款";
        } else if (row.order_status == 1) {
          return "用户取消";
        } else if (row.order_status == 4) {
          return "系统取消";
        } else if (row.order_status == 2) {
          return "已付款";
        } else if (row.order_status == 3) {
          return "申请退款";
        } else if (row.order_status == 5) {
          return "已退款";
        } else if (row.order_status == 6) {
          return "已发货";
        }
      }
    },
    getKeyList() {
      var $this = this;
      this.axios({
        method: "GET",
        url: "http://localhost:9999/market/ecOrder/xujiabao/orderlist",
        params: {
          pageNo: this.currentPage4,
          pageSize: this.pageSize,
          userId: this.userId,
          orderSn: this.orderSn,
          orderStatus: this.orderStatus
        }
      }).then(function(res) {
        $this.tableData = res.data.obj.list;
        $this.total = res.data.obj.total;
      });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.getKeyList();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage4 = val;
      this.getKeyList();
    }
  },
  data() {
    return {
      msg: "Welcome to Your Vue.js App",
      currentPage4: 1,
      pageSize: 10,
      tableData: [],
      total: 0,
      updFlag: false,
      form: {},
      formLabelWidth: "120px",
      orderSn: "",
      userId: "",
      orderStatus:"",
      typeList: [{
				value: "0",
				label: "未付款"
			},
			{
				value: "1",
				label: "用户取消"
			},
			{
				value: "2",
				label: "系统取消"
      },
      {
				value: "3",
				label: "已付款"
      },
      {
				value: "4",
				label: "申请退款"
      },
      {
				value: "5",
				label: "已退款"
      },
      {
				value: "6",
				label: "已发货"
			}
		],
    };
  },
  mounted() {
    this.getKeyList();
  }
};
</script>

